@import '../../var';
.logo {
  height: 60%;
}

page {
  background-color: $bgcolor-gray;
}

.swiper-tab {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 88rpx;
  padding: 0 250rpx;
  color: $info-color;
  font-weight: bold;
  font-size: 32rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #fff;
  &.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    margin-top: 0;
    border-bottom: 1px solid #f4f5f5;
  }
}

.swiper-tab-item {
  width: 50%;
  font-size: 28rpx;
  &.active {
    color: $title-color;
  }
}

.tab-container {
  &.hidden {
    display: none;
  }
  &.show {
    display: block;
  }
}

.headTitle {
  color: $title-color;
  font-weight: bold;
  font-size: 32rpx;
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: $decor-color;
  height: 100vh;
  image {
    width: 400rpx;
    height: 400rpx;
  }
}

.order-list {
  .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20rpx;
    padding: 36rpx 28rpx;
    color: $text-color;
    background-color: $bgcolor-light;
    border-radius: 10rpx;
    .userInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .user {
        display: flex;
        align-items: center;
        .userImg {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36rpx;
          height: 36rpx;
          margin: auto;
          border-radius: 50%;
          .avatar {
            width: 100%;
            height: 100%;
          }
          .authenticationBox {
            position: absolute;
            right: -4rpx;
            bottom: 0rpx;
            display: flex;
            align-items: center;
            width: 15rpx;
            height: 15rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 0;
            }
          }
        }
        .userName {
          margin-left: 21rpx;
          color: $title-color;
          font-size: 24rpx;
        }
      }
      .time {
        color: $decor-color;
        font-size: 24rpx;
        .prices {
          color: $title-color;
          text {
            color: $decor-color;
          }
        }
      }
      .times {
        margin-left: 20rpx;
      }
    }
    .productInfo {
      display: flex;
      width: 100%;
      height: 120rpx;
      margin-top: 24rpx;
      .productImg {
        width: 120rpx;
        height: 120rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .productPrice {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 18rpx 20rpx 18rpx 20rpx;
        .title {
          color: $title-color;
          font-size: 24rpx;
        }
        .productCount {
          color: $info-color;
          font-size: 28rpx;
          text-align: right;
          &-price {
            color: $title-color;
            font-weight: 600;
          }
        }
        .options {
          color: $info-color;
          font-size: 20rpx;
        }
      }
    }
    .productStatus {
      margin-top: 12rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: $title-color;
      .status {
        color: #015e80;
      }
    }
    .productFooter {
      margin-top: 12rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: $title-color;
      .status {
        color: #015e80;
      }
    }
  }
}

.kownledge-list {
  .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20rpx;
    padding: 0rpx 30rpx;
    color: $text-color;
    background-color: $bgcolor-light;
    border-radius: 10rpx;
    .userInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 24rpx;
      .user {
        display: flex;
        align-items: center;
        .userImg {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36rpx;
          height: 36rpx;
          margin: auto;
          border-radius: 50%;
          .avatar {
            width: 100%;
            height: 100%;
          }
          .authenticationBox {
            position: absolute;
            right: -4rpx;
            bottom: 0rpx;
            display: flex;
            align-items: center;
            width: 15rpx;
            height: 15rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 0;
            }
          }
        }
        .userName {
          margin-left: 21rpx;
          color: $title-color;
          font-size: 24rpx;
        }
      }
      .time {
        color: $decor-color;
        font-size: 28rpx;
        .prices {
          color: $title-color;
          text {
            color: $decor-color;
          }
        }
      }
      .times {
        margin-left: 20rpx;
      }
    }
    .productInfo {
      display: flex;
      width: 100%;
      height: 120rpx;
      background-color: $bgcolor-gray;
      margin-top: 24rpx;
      .productImg {
        width: 120rpx;
        height: 120rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .productPrice {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 18rpx 20rpx 18rpx 20rpx;
        .title {
          color: $title-color;
          font-size: 28rpx;
        }
        .productCount {
          color: $info-color;
          font-size: 28rpx;
          text-align: right;
          &-price {
            color: $title-color;
            font-weight: 600;
          }
        }
        .options {
          color: $info-color;
          font-size: 20rpx;
        }
      }
    }
    .productFooter {
      flex: 1;
      align-items: center;
      justify-content: space-between;
      height: 103rpx;
      margin: 24rpx 0;
      .box {
        color: $info-color;
        font-size: 20rpx;
      }
      .price {
        color: $title-color;
        font-weight: 700;
        font-size: 28rpx;
        text {
          color: $info-color;
        }
      }
      .operation {
        display: flex;
        align-items: center;
        margin-top: 16rpx;
        float: right;
        span {
          display: flex;
        }
        .comment {
          padding: 0rpx 22rpx;
          border: 2rpx solid $primary-color;
          border-radius: 22rpx;
        }
        .commented {
          padding: 0rpx 22rpx;
          color: $info-color;
          border: 2rpx solid $info-color;
          border-radius: 22rpx;
        }
        text {
          margin-right: 40rpx;
          padding: 2rpx 0 0 0;
          color: $title-color;
          font-size: 28rpx;
        }
        .btn {
          margin-right: 20rpx;
          border: 1px solid #cccccc;
          color: $title-color;
        }
        view {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 26rpx;
          height: 44rpx;
          margin-right: 40rpx;
          font-size: 24rpx;
          border-radius: 22rpx;
        }
        .shipped {
          color: #b3b3b3;
          border: 2rpx solid $decor-color;
        }
        .ship {
          color: $title-color;
          border: 2rpx solid $primary-color;
        }
        .wait {
          color: #b3b3b3;
          font-size: 24rpx;
        }
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}

.operations {
  position: fixed;
  right: 65rpx;
  bottom: 240rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 90rpx;
  color: #fff;
  background-color: $primary-color;
  border-radius: 50%;
}

.remark {
  white-space: normal;
}
